﻿<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Auto Blog Pipeline 控制台</title>
  <style>
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft Yahei", sans-serif; margin: 2rem; }
    form { max-width: 960px; }
    label { display:block; margin: .4rem 0 .2rem; font-weight: 600; }
    select, input[type=text], input[type=number] { width: 100%; padding: .5rem; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .btn { margin-top: 1rem; padding: .6rem 1rem; border: 0; background: #4f46e5; color: #fff; border-radius: .25rem; cursor: pointer; }
    .muted { color: #666; font-size: .9rem; }
    .inline { display: inline-flex; align-items: center; gap: .5rem; }
  </style>
  <script>
    function fillDemo() {
      document.getElementById('query').value = 'Jewelry mix and match tips';
      document.getElementById('theme').value = 'How to Mix and Match Jewelry Like a Stylist';
      document.getElementById('max_links').value = '15';
    }

    async function aiGen(){
      const btn = document.getElementById('btn_ai_gen');
      const tip = document.getElementById('ai_tip');
      const aiTopicEl = document.getElementById('ai_topic');
      const themeEl = document.getElementById('theme');
      const queryEl = document.getElementById('query');
      let topic = (aiTopicEl && aiTopicEl.value || '').trim() || themeEl.value.trim() || queryEl.value.trim();
      if(!topic){ alert('请输入主题或先填写 Theme/Query'); return; }
      btn.disabled = true; const oldTxt = btn.textContent; btn.textContent = '生成中...';
      tip.textContent = '调用中...';
      try{
        const resp = await fetch('/gen-query-theme', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ topic }) });
        const data = await resp.json();
        if(data && data.ok){
          if(data.query) queryEl.value = data.query;
          if(data.theme) themeEl.value = data.theme;
          tip.textContent = '已填充生成结果';
        } else {
          tip.textContent = '生成失败：' + (data && data.error ? data.error : '未知错误');
        }
      } catch(err){
        tip.textContent = '网络错误：' + (err && err.message ? err.message : err);
      } finally {
        btn.disabled = false; btn.textContent = oldTxt;
      }
    }
  </script>
</head>
<body>
  <h1>Auto Blog Pipeline 控制台</h1>
  <p class="muted">输入 Query 和 Theme，然后开始运行流水线；点击“开始运行”后会进入日志页实时查看输出。</p>

  <form id="form-single" method="post" action="/run">
    <label for="browser">浏览器</label>
    <select id="browser" name="browser">
      <option value="chromium" selected>Chromium</option>
      <option value="firefox">Firefox</option>
      <option value="webkit">WebKit</option>
      <option value="chrome">Chrome (映射到Chromium)</option>
      <option value="edge">Edge (映射到Chromium)</option>
    </select>

    <div style="margin: .5rem 0 0; padding:.75rem; background:#f8fafc; border:1px solid #e5e7eb; border-radius:.25rem;">
      <div style="font-weight:600; margin-bottom:.25rem;">AI 生成 Query & Theme（Gemini）</div>
      <div class="row">
        <div>
          <label for="ai_topic">AI 主题输入（留空则使用下方 Theme 或 Query）</label>
          <input id="ai_topic" type="text" placeholder="可输入中文主题，点击右侧按钮自动生成" />
        </div>
        <div>
          <label>&nbsp;</label>
          <button class="btn" type="button" id="btn_ai_gen" onclick="aiGen()">AI 生成</button>
        </div>
      </div>
      <div id="ai_tip" class="muted" style="margin-top:.25rem;">需要环境变量 GEMINI_API_KEY 或 AIHUBMIX_API_KEY</div>
    </div>

    <label for="query">Query</label>
    <input id="query" name="query" type="text" placeholder="例如：best ways to style layered necklaces" />

    <label for="theme">Theme</label>
    <input id="theme" name="theme" type="text" placeholder="例如：Layered Necklace Styling Guide" />

    <div class="row">
      <div>
        <label for="max_links">最大搜索链接数 (可选)</label>
        <input id="max_links" name="max_links" type="number" min="1" step="1" value="30"/>
      </div>
      <div>
        <label for="crawler_timeout">爬虫单页超时(秒)</label>
        <input id="crawler_timeout" name="crawler_timeout" type="number" min="10" step="5" value="10" />
      </div>
    </div>

    <div class="row">
      <div>
        <label for="crawler_settle">爬虫加载后额外等待(秒)</label>
        <input id="crawler_settle" name="crawler_settle" type="number" min="0" step="0.1" value="1" />
      </div>
      <div>
        <label for="crawler_workers">并发线程数</label>
        <input id="crawler_workers" name="crawler_workers" type="number" min="1" step="1" value="1" />
      </div>
    </div>

    <div class="row">
      <div>
        <label for="start">开始序号(1-based, 可选)</label>
        <input id="start" name="start" type="number" min="1" step="1" />
      </div>
      <div>
        <label for="end">结束序号(1-based, 可选)</label>
        <input id="end" name="end" type="number" min="1" step="1" />
      </div>
    </div>

    <div class="row">
      <div>
        <label for="crawler_page_load_strategy">页面等待策略</label>
        <select id="crawler_page_load_strategy" name="crawler_page_load_strategy">
          <option value="normal" selected>normal (load)</option>
          <option value="eager">eager (DOMContentLoaded)</option>
          <option value="none">none (commit)</option>
        </select>
      </div>
      <div>
        <label for="crawler_user_data_dir">用户数据根目录(可选)</label>
        <input id="crawler_user_data_dir" name="crawler_user_data_dir" type="text" placeholder="如：.profiles" />
      </div>
    </div>

    <div class="row">
      <div>
        <label for="crawler_raw_html_out">保存原始HTML目录(可选)</label>
        <input id="crawler_raw_html_out" name="crawler_raw_html_out" type="text" placeholder="如：out_html" />
      </div>
      <div style="display:flex;align-items:center;gap:1rem;">
        <label class="inline"><input type="checkbox" name="crawler_headless" /> 无头模式(headless)</label>
        <label class="inline"><input type="checkbox" name="skip_crawl" /> 跳过爬取</label>
        <label class="inline"><input type="checkbox" name="compose_direct" /> 直接根据源文撰写</label>
      </div>
    </div>

    <div class="row">
      <div>
        <label class="inline"><input type="checkbox" name="wecom_send" checked /> 发送到企业微信</label>
      </div>
      <div>
        <label for="wecom_webhook">自定义企微Webhook(可选)</label>
        <input id="wecom_webhook" name="wecom_webhook" type="text" placeholder="留空使用默认内置" />
      </div>
    </div>

    <button class="btn" type="submit">开始运行</button>
    <button class="btn" type="button" onclick="fillDemo()" style="background:#0ea5e9;">填充示例</button>
  </form>

  <hr style="margin:2rem 0;" />
  <h2>批量运行</h2>
  <p class="muted">在下方输入多个主题（每行一个）。可选：使用 Gemini 先为每个主题生成更适合搜索的 query 与英文 theme，然后批量运行流水线。</p>
  <form id="form-batch" method="post" action="/run-batch">
    <label for="themes">主题列表（每行一个）</label>
    <textarea id="themes" name="themes" rows="8" style="width:100%;font-family:monospace;"></textarea>

    <div class="row">
      <div>
        <label class="inline"><input type="checkbox" name="use_gemini" checked/> 使用 Gemini 生成 query & theme</label>
      </div>
      <div>
        <label for="browser_batch">浏览器</label>
        <select id="browser_batch" name="browser">
          <option value="chromium" selected>Chromium</option>
          <option value="firefox">Firefox</option>
          <option value="webkit">WebKit</option>
          <option value="chrome">Chrome (映射到Chromium)</option>
          <option value="edge">Edge (映射到Chromium)</option>
        </select>
      </div>
    </div>

    <div class="row">
      <div>
        <label for="max_links_batch">最大搜索链接数 (可选)</label>
        <input id="max_links_batch" name="max_links" type="number" min="1" step="1" value="30"/>
      </div>
      <div></div>
    </div>

    <div class="row">
      <div>
        <label for="crawler_timeout_batch">爬虫单页超时(秒)</label>
        <input id="crawler_timeout_batch" name="crawler_timeout" type="number" min="10" step="5" value="10" />
      </div>
      <div>
        <label for="crawler_workers_batch">并发线程数</label>
        <input id="crawler_workers_batch" name="crawler_workers" type="number" min="1" step="1" value="3" />
      </div>
    </div>

    <div class="row">
      <div>
        <label for="crawler_settle_batch">爬虫加载后额外等待(秒)</label>
        <input id="crawler_settle_batch" name="crawler_settle" type="number" min="0" step="0.1" value="0.5" />
      </div>
      <div>
        <label for="crawler_page_load_strategy_batch">页面等待策略</label>
        <select id="crawler_page_load_strategy_batch" name="crawler_page_load_strategy">
          <option value="normal" selected>normal (load)</option>
          <option value="eager">eager (DOMContentLoaded)</option>
          <option value="none">none (commit)</option>
        </select>
      </div>
    </div>

    <div class="row">
      <div>
        <label for="crawler_user_data_dir_batch">用户数据根目录(可选)</label>
        <input id="crawler_user_data_dir_batch" name="crawler_user_data_dir" type="text" placeholder="如：.profiles" />
      </div>
      <div>
        <label for="crawler_raw_html_out_batch">保存原始HTML目录(可选)</label>
        <input id="crawler_raw_html_out_batch" name="crawler_raw_html_out" type="text" placeholder="如：out_html" />
      </div>
    </div>

    <div style="display:flex;align-items:center;gap:1rem;">
      <label class="inline"><input type="checkbox" name="crawler_headless" /> 无头模式(headless)</label>
      <label class="inline"><input type="checkbox" name="skip_crawl" /> 跳过爬取</label>
      <label class="inline"><input type="checkbox" name="compose_direct" /> 直接根据源文撰写</label>
      <label class="inline"><input type="checkbox" name="keep_params" disabled /> （保留参数）</label>
    </div>

    <div class="row" style="margin-top:.5rem;">
      <div>
        <label class="inline"><input type="checkbox" name="wecom_send" checked/> 发送到企业微信</label>
      </div>
      <div>
        <label for="wecom_webhook_batch">自定义企微Webhook(可选)</label>
        <input id="wecom_webhook_batch" name="wecom_webhook" type="text" placeholder="留空使用默认内置" />
      </div>
    </div>

    <button class="btn" type="submit">开始批量运行</button>
  </form>

</body>
</html>
